<template>
   <WidgetForm ref="widgetFormRef" :form-fields="dialog.formFields" :option="{
                      businessName: '大屏',
                      formLabelWidth: '80px'
                    }"/>
</template>
<script setup lang="ts">
import {defineEmits, defineExpose, defineProps, nextTick, onBeforeMount, onBeforeUnmount, onMounted, reactive, ref} from "vue";
import {WidgetFormField} from "@/model/Definition";
import WidgetForm from "@/components/widget/WidgetForm.vue";
  const props = defineProps({
    field: {
      type: Object,
      required: false,
      default: null
    }
  })

  const dialog = reactive<{formFields: WidgetFormField[]}>({
    formFields: [
      {
        field: 'customerLogo',
        label: '客户LOGO',
        type: 'select',
        placeholder: '请选择客户LOGO',
        options: []
      }, {
        field: 'componentLogo',
        label: '公司LOGO',
        type: 'select',
        placeholder: '请选择客户LOGO',
        options: []
      },
    ]
  })

  const $emit = defineEmits({})

  const widgetFormRef = ref()


  const initFormData = (data) => {
    if (data && data[props.field.field]) {
      const configObj = JSON.parse(data[props.field.field])
      widgetFormRef.value.initFormData(configObj)
    }
  }

  const resetFields = () => {
    widgetFormRef.value.resetFields()
  }

  const getFormFieldValue = () => {
    const formField = widgetFormRef.value.getFormFieldValue()
    const result = {}
    result[props.field.field] = JSON.stringify(formField)
    return result
  }

  defineExpose({
    resetFields,
    initFormData,
    getFormFieldValue
  })

</script>
<style scoped lang="scss">

</style>